import React from 'react'
import PropTypes from 'prop-types'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import App from './App'
import {SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED} from '../constants/TodoFilters'
import UserProfile from '../containers/UserProfile'
import Login from '../containers/Login'
import UpdateProfile from '../containers/UpdateProfile'
const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
        <div>
      <Route exact path="/" component={App} />
      <Route path={`/${SHOW_ALL}`} component={App} />
      <Route path={`/${SHOW_ACTIVE}`} component={App} />
      <Route path={`/${SHOW_COMPLETED}`} component={App} />

      <Route path="/user" component={UserProfile}/>
      <Route path="/updateProfile" component={UpdateProfile}/>

      <Route path="/login" component={Login}/>
      <nav className="bottomNav"> 
                <ul className="filters">
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/user">Users</Link>
                </li>
                </ul>
      </nav> 
      </div>
    </Router>
  </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired
}

export default Root